<template>
    <div class="position-salary-change-form">
        <div class="header-actions">
            <router-link to="/main/renshi/jixiao">返回绩效</router-link>
            <router-link to="/main/renshi/jixiao/xzyidongList">列表</router-link>
        </div>
        <h2 class="form-title">职位/薪资异动申请表</h2>
        <p class="form-field">
            申请日期：
            <input v-model="formData.applyDate" type="date" :disabled="isView" />
        </p>
        <table class="form-table" border="1">
            <tr>
                <td>工号</td>
                <td><input v-model="formData.employeeNo" :disabled="isView" /></td>
                <td>姓名</td>
                <td><input v-model="formData.employeeName" :disabled="isView" /></td>
                <td>性别</td>
                <td>
                    <select v-model="formData.gender" :disabled="isView">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input v-model="formData.age" type="number" :disabled="isView" min="0" /></td>
                <td>最高学历</td>
                <td><input v-model="formData.highestEducation" :disabled="isView" /></td>
                <td>入职日期</td>
                <td><input style="width: 100%;" v-model="formData.entryDate" type="date"
                        :disabled="isView" /></td>
            </tr>
            <tr>
                <td>原任职部门</td>
                <td><input v-model="formData.originalDepartment" :disabled="isView" /></td>
                <td>原职务/职位</td>
                <td><input v-model="formData.originalPosition" :disabled="isView" /></td>
                <td>新任职部门</td>
                <td><input v-model="formData.newDepartment" :disabled="isView" /></td>
            </tr>
            <tr>
                <td>新职务/职位</td>
                <td><input v-model="formData.newPosition" :disabled="isView" /></td>
                <td colspan="4">
                    <label><input type="checkbox" v-model="formData.isFormalHire" :disabled="isView" style="height: 15px;" /> 正式任用</label>
                    <label><input type="checkbox" v-model="formData.isTerminateLabor" :disabled="isView"  style="height: 15px;"/>
                        终止劳动关系</label>
                    <label><input type="checkbox" v-model="formData.isExtendProbation" :disabled="isView"  style="height: 15px;"/>
                        延长试用期（<input v-model="formData.probationMonths" type="number" style="width: 10%;"
                            :disabled="isView" /> 月）
                    </label><br>
                    <label><input type="checkbox" v-model="formData.isChangePosition" :disabled="isView"  style="height: 15px;"/> 变更职务</label>
                    <label><input type="checkbox" v-model="formData.isChangeSalary" :disabled="isView"  style="height: 15px;"/> 变&emsp;更&ensp;薪&ensp;资</label>
                    <label><input type="checkbox" v-model="formData.isOtherChange" :disabled="isView"  style="height: 15px;"/> 其他：<input
                            style="width: 20%;" v-model="formData.otherChangeDesc" :disabled="isView" /></label>
                </td>
            </tr>
        </table>
        <table class="form-table" border="1">
            <thead>
                <tr>
                    <th rowspan="2" style="width: 5%;">项目</th>
                    <th rowspan="2" style="width: 5%;">级别</th>
                    <th rowspan="2" style="width: 5%;">薪档</th>
                    <th colspan="3">基本薪资</th>
                    <th rowspan="2" style="width: 5%;">加班工资</th>
                    <th colspan="2" style="width: 5%;">绩效奖</th>
                    <th rowspan="2" style="width: 5%;">岗位特殊津贴</th>
                    <th rowspan="2" style="width: 5%;">其他</th>
                    <th rowspan="2" style="width: 5%;">合计</th>
                </tr>
                <tr>
                    <th style="width: 5%;">基础工资</th>
                    <th style="width: 5%;">技能工资</th>
                    <th style="width: 5%;">岗位工资</th>
                    <th style="width: 5%;">工龄</th>
                    <th style="width: 5%;">绩效奖金</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>原职位</td>
                    <td><input v-model="formData.originalLevel" :disabled="isView" /></td>
                    <td><input v-model="formData.originalPayGrade" :disabled="isView" /></td>
                    <td><input v-model="formData.originalBaseSalary" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalSkillSalary" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalPositionSalary" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalOvertimePay" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalPerformanceBonus" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalPostAllowance" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalSpecialAllowance" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalOtherAmount" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.originalTotal" type="number" :disabled="isView" /></td>
                </tr>
                <tr>
                    <td>新职位</td>
                    <td><input v-model="formData.newLevel" :disabled="isView" /></td>
                    <td><input v-model="formData.newPayGrade" :disabled="isView" /></td>
                    <td><input v-model="formData.newBaseSalary" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newSkillSalary" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newPositionSalary" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newOvertimePay" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newPerformanceBonus" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newPostAllowance" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newSpecialAllowance" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newOtherAmount" type="number" :disabled="isView" /></td>
                    <td><input v-model="formData.newTotal" type="number" :disabled="isView" /></td>
                </tr>
                <tr>
                    <td colspan="12">备注：<input v-model="formData.remarks" :disabled="isView" /></td>
                </tr>
            </tbody>
        </table>
        <table class="form-table" border="1">
            <thead>
                <tr>
                    <th colspan="2" style="width: 20%;">审查项目</th>
                    <th colspan="2" style="width: 80%;">审查结果摘要</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2">1. 年度内受记嘉奖(含)以上尚未抵销的奖励</td>
                    <td colspan="2"><input v-model="formData.rewardResult" :disabled="isView" /></td>
                </tr>
                <tr>
                    <td colspan="2">2. 年度内受记警告(含)以上尚未抵销的处分</td>
                    <td colspan="2"><input v-model="formData.punishmentResult" :disabled="isView" /></td>
                </tr>
                <tr>
                    <td colspan="2">3. 年度内考勤状况</td>
                    <td colspan="2" style="text-align: left;">
                        病假：<input v-model="formData.sickLeaveDays" type="number" :disabled="isView" style="width: 10%;"/>&emsp;
                        事假：<input v-model="formData.personalLeaveDays" type="number" :disabled="isView"  style="width: 10%;"/>&emsp;
                        旷职：<input v-model="formData.absenceDays" type="number" :disabled="isView" style="width: 10%;" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">4. 年度内教育训练记录</td>
                    <td colspan="2" style="text-align: left;">
                        结果：<input v-model="formData.trainingResult" :disabled="isView" /><br>
                        课时：<input v-model="formData.trainingHours" type="number" :disabled="isView" style="width: 10%;" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">员工本人意见：</td>
                    <td colspan="2" style="text-align: left;">1. 以上信息本人确认无误，同意薪资、职务、工作地点等的调整。<br>
                        2. 本人承诺：将尽职尽责按公司要求完成工作；如有违反，同意按公司相关制度执行。<br>签名：<input v-model="formData.employeeSignature"
                            :disabled="isView" /><br>
                        日期：<input v-model="formData.employeeSignatureDate" type="date" :disabled="isView" /></td>
                </tr>
            </tbody>
        </table>
        <table class="form-table">
            <tr>
                <td>原部门评定意见：</td>
                <td><input type="radio" v-model="formData.originalDeptOpinion" value="同意"
                        :disabled="isView"  style="height: 15px;"/> 同意</td>
                <td><input type="radio" v-model="formData.originalDeptOpinion" value="不同意"
                        :disabled="isView"  style="height: 15px;"/> 不同意
                </td>
                <td>主管：<input v-model="formData.originalDeptSupervisor" :disabled="isView" /></td>
                <td><input type="radio" v-model="formData.originalDeptManagerOpinion" value="同意"
                        :disabled="isView"  style="height: 15px;"/>
                    同意</td>
                <td><input type="radio" v-model="formData.originalDeptManagerOpinion" value="不同意"
                        :disabled="isView"  style="height: 15px;"/>
                    不同意</td>
                <td>经理：<input v-model="formData.originalDeptManager" :disabled="isView" /></td>
                <td><input type="radio" v-model="formData.originalDeptDirectorOpinion" value="同意"
                        :disabled="isView" style="height: 15px;" />
                    同意</td>
                <td><input type="radio" v-model="formData.originalDeptDirectorOpinion" value="不同意"
                        :disabled="isView" style="height: 15px;" />
                    不同意</td>
                <td>部长/总监：<input v-model="formData.originalDeptDirector" :disabled="isView" /></td>
                <td><input type="radio" v-model="formData.originalDeptGmOpinion" value="同意"
                        :disabled="isView" style="height: 15px;" /> 同意
                </td>
                <td><input type="radio" v-model="formData.originalDeptGmOpinion" value="不同意"
                        :disabled="isView" style="height: 15px;" /> 不同意
                </td>
                <td>总经理：<input v-model="formData.originalDeptGm" :disabled="isView" /></td>
            </tr>
            <tr>
                <td>新部门评定意见：</td>
                <td><input type="radio" v-model="formData.newDeptOpinion" value="同意"
                        :disabled="isView" style="height: 15px;" /> 同意</td>
                <td><input type="radio" v-model="formData.newDeptOpinion" value="不同意"
                        :disabled="isView" style="height: 15px;" /> 不同意</td>
                <td>主管：<input v-model="formData.newDeptSupervisor" :disabled="isView" /></td>
                <td><input type="radio" v-model="formData.newDeptManagerOpinion" value="同意"
                        :disabled="isView" style="height: 15px;" /> 同意
                </td>
                <td><input type="radio" v-model="formData.newDeptManagerOpinion" value="不同意"
                        :disabled="isView" style="height: 15px;" /> 不同意
                </td>
                <td>经理：<input v-model="formData.newDeptManager" :disabled="isView" /></td>
                <td><input type="radio" v-model="formData.newDeptDirectorOpinion" value="同意"
                        :disabled="isView" style="height: 15px;" /> 同意
                </td>
                <td><input type="radio" v-model="formData.newDeptDirectorOpinion" value="不同意"
                        :disabled="isView" style="height: 15px;" /> 不同意
                </td>
                <td>部长/总监：<input v-model="formData.newDeptDirector" :disabled="isView" /></td>
                <td><input type="radio" v-model="formData.newDeptGmOpinion" value="同意"
                        :disabled="isView" style="height: 15px;" /> 同意</td>
                <td><input type="radio" v-model="formData.newDeptGmOpinion" value="不同意"
                        :disabled="isView" style="height: 15px;" /> 不同意</td>
                <td>总经理：<input v-model="formData.newDeptGm" :disabled="isView" /></td>
            </tr>
            <tr>
                <td colspan="3" style="width: 30%;">人资审查意见：</td>
                <td colspan="4" style="width: 30%;">拟生效日期：<input style="width: 150px;" v-model="formData.effectiveDate" type="date"
                        :disabled="isView" /></td>
                <td colspan="6" style="width: 30%;">人资经办：<input v-model="formData.hrHandler" :disabled="isView" /></td>
            </tr>
            <tr>
                <td colspan="" style="width: 20%;">总裁/董事长意见：</td>
                <td><input type="radio" v-model="formData.presidentOpinion" value="同意提报"
                        :disabled="isView" style="height: 15px;" /> 同意提报。
                </td>
                <td colspan=""><input type="radio" v-model="formData.presidentOpinion"
                        value="暂缓再议，退件处理" :disabled="isView" style="height: 15px;" />
                    暂缓再议，退件处理。</td>
                <td colspan="2">总裁：<input v-model="formData.president" :disabled="isView" /></td>
                <td>企业管理部意见：</td>
                <td colspan=""><input type="radio" v-model="formData.managementDeptOpinion"
                        value="同意提报" :disabled="isView" style="height: 15px;" />
                    同意提报。</td>
                <td colspan="2"><input type="radio" v-model="formData.managementDeptOpinion"
                        value="暂缓再议，退件处理" :disabled="isView" style="height: 15px;" />
                    暂缓再议，退件处理。</td>
                <td colspan="4">企业管理部：<input v-model="formData.managementDept" :disabled="isView" />
                </td>
            </tr>
            <td colspan="13">表单编号及版本：无 保存期限：长期</td>
        </table>
        <el-button v-if="!isView" type="primary" @click="saveData" class="save-button">保存</el-button>
    </div>
</template>

<script>
import { savePositionSalaryChange, getPositionSalaryChangeDetail } from '@/api/positionSalaryChange'

export default {
    data() {
        return {
            isView: false,
            formData: {
                id: null,
                applyDate: '',
                employeeNo: '',
                employeeName: '',
                gender: '',
                age: '',
                highestEducation: '',
                entryDate: '',
                originalDepartment: '',
                originalPosition: '',
                newDepartment: '',
                newPosition: '',
                isFormalHire: false,
                isTerminateLabor: false,
                isExtendProbation: false,
                probationMonths: '',
                isChangePosition: false,
                isChangeSalary: false,
                isOtherChange: false,
                otherChangeDesc: '',
                originalLevel: '',
                originalPayGrade: '',
                originalBaseSalary: '',
                originalSkillSalary: '',
                originalPositionSalary: '',
                originalOvertimePay: '',
                originalPerformanceBonus: '',
                originalPostAllowance: '',
                originalSpecialAllowance: '',
                originalOtherAmount: '',
                originalTotal: '',
                newLevel: '',
                newPayGrade: '',
                newBaseSalary: '',
                newSkillSalary: '',
                newPositionSalary: '',
                newOvertimePay: '',
                newPerformanceBonus: '',
                newPostAllowance: '',
                newSpecialAllowance: '',
                newOtherAmount: '',
                newTotal: '',
                remarks: '',
                rewardResult: '',
                punishmentResult: '',
                sickLeaveDays: '',
                personalLeaveDays: '',
                absenceDays: '',
                trainingResult: '',
                trainingHours: '',
                employeeSignature: '',
                employeeSignatureDate: '',
                originalDeptOpinion: '',
                originalDeptSupervisor: '',
                originalDeptManagerOpinion: '',
                originalDeptManager: '',
                originalDeptDirectorOpinion: '',
                originalDeptDirector: '',
                originalDeptGmOpinion: '',
                originalDeptGm: '',
                newDeptOpinion: '',
                newDeptSupervisor: '',
                newDeptManagerOpinion: '',
                newDeptManager: '',
                newDeptDirectorOpinion: '',
                newDeptDirector: '',
                newDeptGmOpinion: '',
                newDeptGm: '',
                effectiveDate: '',
                hrHandler: '',
                presidentOpinion: '',
                president: '',
                managementDeptOpinion: '',
                managementDept: ''
            }
        };
    },
    async created() {
        const { id, mode } = this.$route.query
        this.isView = mode === 'view'

        if (id) {
            await this.fetchDetail(id)
        }
    },
    methods: {
        async fetchDetail(id) {
            try {
                const response = await getPositionSalaryChangeDetail(id)
                this.formData = response.data
            } catch (error) {
                this.$message.error('获取详情失败：' + error.message)
            }
        },
        async saveData() {
            try {
                if (!this.formData.employeeNo) throw new Error('请填写工号')
                if (!this.formData.employeeName) throw new Error('请填写姓名')
                if (!this.formData.applyDate) throw new Error('请选择申请日期')

                await savePositionSalaryChange(this.formData)
                this.$message.success('保存成功')
                this.$router.push('/main/renshi/jixiao/xzyidongList')
            } catch (error) {
                this.$message.error('保存失败：' + error.message)
            }
        }
    }
};
</script>

<style scoped>
.position-salary-change-form {
    font-family: '宋体', sans-serif;
    padding: 20px;
    /* background-color: #f9f9f9; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    max-width: 1200px;
    /* 设置最大宽度 */
    margin: 0 auto;
    /* 水平居中 */
}

.header-actions {
    display: flex;
    padding: 0px 10px;
    gap: 20px;
}

.form-title {
    text-align: center;
    color: #333;
}

.form-field {
    margin-bottom: 20px;
}

.form-table {
    border-collapse: collapse;
    width: 100%;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
}

.form-table th,
.form-table td {
    border: 1px solid #ddd;
    padding: 8px;
    /* 减小内边距 */
    text-align: center;
    /* white-space: nowrap; */
}

.form-table th {
    background-color: #f2f2f2;
}

input[disabled],
textarea[disabled] {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
}

input,
select {
    width: 80%;
    padding:6px;
    margin: 3px 0px;
    /* 减小内边距 */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="date"] {
    width: 15%;
}

input[type="checkbox"] {
    width: 5%;
}

.save-button {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}
</style>